﻿@model dynamic

@{
    ViewBag.Title = "title";
    Layout = "~/Views/Shared/_MobileLayout.cshtml";
}


<!-- header zone -->

<!-- content zone -->

<div id="mainMobilePage" data-role="page">
    <div data-role="header">
        <h1>
            <img src="../../Content/img/boy.png" height="50px">
            About
        </h1>
    </div>
    @section header{
    
    }
    
    <div data-role="content">
        <div id="JuniorChatBoxComponent" class="data">
            <div id="LogInSection">
                <label for="UserName">I am</label>
                <input id="UserName" />
                <button type="button" id="LogIn" value="LogIn" class="btn" disabled="disabled">login</button>
                <div id="selectorError" style="display: none;">Username already exist</div>
                <br />

            </div>
            <label for="LoggedInUsersContainer">Users:</label>
            <ul id="LoggedInUsersContainer" data-role="listview" data-inset="true">
            </ul>

            <div class="reset"></div>
            <br />

            <div id="ChatSection" style="display: none;">
                <hr>
                <br />
                <label for="UserInput">Type here</label>
                <input id="UserInput" />
                <input type="button" id="Send" value="Send" class="btn" disabled="disabled" />
                <br />
                <img src="../../Content/img/icoMsg.png" width="40" height="35">
                <label for="MessagesContainer">Messages:</label>
                <ul id="MessagesContainer" data-role="listview" data-inset="true">
                </ul>
            </div>
        </div>
    </div>
    <div data-role="footer">
        <a href="#aboutMobilePage">about</a>
    </div>
</div>
<!-- content zone -->
<div id="aboutMobilePage" data-role="page">
    <div data-role="header">
        <h1>
            <img src="../../Content/img/boy.png" height="50px">
            Welcome!
        </h1>
    </div>
    <div data-role="content" style="height:400px">
        <div id="map-canvas" style="height:100%;"></div>
    </div> 
	<div data-role="footer">
        <a href="#mainMobilePage">main</a>
    </div>
</div>

<!-- footer zone -->
@section footer{
    <img src="../../Content/img/html5.png" width="180" height="210">
    <img src="../../Content/img/plus.png" width="130" height="210">
    <img src="../../Content/img/coffie.png" width="190" height="210">
    <img src="../../Content/img/equal.png" width="110" height="210">
    <img src="../../Content/img/heart.png" width="230" height="210">
}
<!-- footer zone -->

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {

            $("#JuniorChatBoxComponent").mobilejuniorchatbox();

            //var myObject = new JuniorChatBox();
        });
        
    </script>
    <script id="user" type="text/x-jsrender">
        <li>
            <img class="ui-li-icon" src="../../Content/img/{{:IconUrl}}">
            </img>
            {{:Name}}
        </li>
    </script>

    <script id="message" type="text/x-jsrender">
        <li>
            <img class="ui-li-icon" src="../../Content/img/{{:User.IconUrl}}">
            </img>
            {{:User.Name}}:{{:Message}}
        </li>
    
    </script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>


}